<!--
 * @Description:  frm-题库解析 -- frmReport
 * @Author: your name
 * @Date: 2024-01-03
 * @LastEditTime: 2024-01-03
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="frmReport heart_w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item> FRM </el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ cate_arr_name }}
        </el-breadcrumb-item>
      </el-breadcrumb>

      <div class="result">
        <div class="wrapper">
          <p class="test_title">
            {{ content_form.title }}
          </p>
          <p class="bt">正确率</p>
          <div class="zuoc_l">
            <el-progress
              type="circle"
              :percentage="Number(content_form.accuracy)"
              :stroke-width="8"
              color="#47c88a"
            >
            </el-progress>
            <p class="zuoc_l2">
              <span><i class="zuoc_l2_l"></i>正确率</span>
            </p>
          </div>

          <div class="four_type">
            <div>
              <p style="color: #2b92f9">
                {{ content_form.count }}<span>题</span>
              </p>
              <small>本次答题总数目</small>
            </div>
            <div>
              <p style="color: #ff6c6c">
                {{ content_form.yes }}<span>题</span>
              </p>
              <small>本次对题总数目</small>
            </div>
            <div>
              <p style="color: #9aa1ac">
                {{ content_form.count }}<span>题</span>
              </p>
              <small>本次做题总数目</small>
            </div>
            <div>
              <p style="color: #ffd007">{{ content_form.use_time }}</p>
              <small>本次答题用时</small>
            </div>
          </div>
        </div>
      </div>

      <div class="answer_card">
        <div class="wrapper">
          <p class="test_title">答题卡</p>
          <p class="answer_result">
            <span><i class="yes"></i>答对</span>
            <span><i class="no"></i>答错</span>
            <span><i class="nodo"></i>未做</span>
          </p>

          <!-- 单项选择test -->
          <p class="bt">【单项选择题】</p>
          <ul>
            <li
              v-for="(item, index) in alltopic"
              :key="index"
              :class="
                item.status == 2 ? 'no' : item.status == 1 ? 'yes' : 'nodo'
              "
            >
              {{ index + 1 }}
            </li>
          </ul>

          <!-- 底部按钮 -->
          <div class="four_btn">
            <router-link
              :to="{
                path: '/exam_practice/FRM/frmAnalysis',
                query: { id: content_form.id }
              }"
            >
              <a href="javascript:void(0);">
                <!-- @click="examineAnalysis(content_form.cid)" -->
                查看全部解析
              </a>
            </router-link>
            <a href="javascript:void(0);" @click="practiceAgain">再次练习</a>
            <router-link
              :to="{
                path: '/exam_practice/FRM/frmQuestionbank',
                query: { cid }
              }"
              tag="a"
            >
              返回首页
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getReport, getSubmitLogInfo } from '@/api/FRM.js'
export default {
  name: 'frmReport',
  data() {
    return {
      alltopic: '',
      accuracy: '',
      report: '',
      casenum: 0,
      testnum: 0, // list题集数据
      textnum: 0,
      cate_arr_name: '',
      content_form: {},
      cid: '', // frmcid
      log_id: ''
    }
  },
  created() {
    this.cid = localStorage.getItem('frmcid')
    this.log_id = this.$route.query.log_id
    console.log('frm报告----1111', this.$route.query.log_id)
    this.testReport()
  },
  mounted() {
    if (this.$route.name == 'frmReport') {
      this.addOne()
    }
  },
  methods: {
    addOne() {
      this.$store.commit('hideGlobalComponent', true)
    },
    async testReport() {
      const { data: data } = await getSubmitLogInfo({ log_id: this.log_id })
      this.alltopic = data.data.list
      this.content_form = data.data.info
      console.log(data.data)
    },

    async testReportCopy() {
      const report_d = {
        report_id: this.$route.query.id,
        token: this.$store.state.token
      }
      const { data: data } = await getReport(report_d)
      console.log('报告数据:', data.data.detail)
      this.alltopic = data.data.detail.test_topic
      this.content_form = data.data.detail
      let cate_title = data.data.detail.cate.slice(0, 2)
      this.cate_arr_name = cate_title.join(' > ')
    },
    practiceAgain() {}
    // examineAnalysis(cid) {
    //   this.$router.push({
    //     path: '/exam_practice/FRM/frmAnalysis',
    //     query: {
    //       cid: cid
    //     }
    //   })
    // }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/cfa_accaReport.scss';

.frmReport {
  margin-bottom: 20px;
}

/* 答题卡 */
.answer_card {
  width: 100%;
  margin: 20px 0;
  .wrapper {
    border: 2px solid #f8f8f8;
    padding: 0 104px 60px 104px;
    background: #fff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    p.test_title {
      height: 124px;
      line-height: 124px;
      font-size: 24px;
      color: #333;
      text-align: center;
    }
    p.answer_result {
      margin-bottom: 10px;
      span {
        line-height: 18px;
        margin-right: 30px;
        i {
          width: 18px;
          height: 18px;
          display: inline-block;
          -webkit-border-radius: 1px;
          -moz-border-radius: 1px;
          -ms-border-radius: 1px;
          -o-border-radius: 1px;
          border-radius: 1px;
          vertical-align: middle;
          margin-top: -2px;
          margin-right: 10px;
        }
        i.yes {
          background: #47c88a;
        }
        i.no {
          background: #ff8a8d;
        }
        i.nodo {
          border: 1px solid #c1c1c1;
          background: #fff;
          color: #333;
        }
      }
    }
    p.bt {
      font-size: 14px;
      color: #333;
      height: 85px;
      line-height: 95px;
    }
    ul {
      // zoom: 1;
      &:before,
      &:after {
        display: table;
        content: '';
      }
      &:after {
        clear: both;
      }
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      list-style: none;
      li {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        font-family: 'Microsoft Yahei';
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        margin: 0 20px 20px 0;
        float: left;
        cursor: pointer;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
      }
      li.yes {
        background: #47c88a;
      }
      li.no {
        background: #ff8a8d;
      }
      li.nodo {
        border: 1px solid #c1c1c1;
        background: #fff;
        color: #333;
        font-size: 14px;
      }
    }
    .four_btn {
      margin-top: 43px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 25%;
      a {
        width: 120px;
        height: 36px;
        line-height: 36px;
        background: #47c88a;
        color: #fff;
        text-align: center;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }
}
</style>
